<template>
  <div style="background-color:">
    <!-- 先把容器布局分割好 -->
    <!-- 头部容器 -->
    <el-header stylde="background-color:">
      <!-- 登录注册  后期改为子路由模式 -->
      <!-- 判断参数是否为true，为的话则是已登录 -->
      
      <!-- 已登录的情况下 -->
      <Sign id="head-ogin" v-if="state=='true'" key="login">
              <el-menu :router="true" :default-active="'1'" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                  <el-submenu index="2" style="float:right">  
                    <template slot="title"><i class="el-icon-user-solid"></i>会员中心</template>
                    <el-menu-item  v-for="i in cities.login" :key="i.index" :index="i.index"><i :class="i.label"></i> {{i.value}}</el-menu-item>
                  </el-submenu>                  
                  <el-menu-item :index="cities.home.index" :route="cities.home.route" style="float:right">欢迎管理员</el-menu-item>
              </el-menu>
      </Sign>

      <!-- 未登录的情况下 -->
      <Sign id="head-ogin" v-else key="not_login">
          <el-menu :router="true" :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
              <el-menu-item :index="cities.notlogin.login.index" style="float:right">登录</el-menu-item>
              <el-menu-item :index="cities.notlogin.register.index" style="float:right">注册</el-menu-item>
          </el-menu>
        
      </Sign>

    </el-header>

    <!-- 中部容器 -->
    <el-main style="background-color:">
      <!-- logo搜索 -->
    <Logo_search @logo_click='logo_click()'>
        
        <el-badge :value="3" class="item" id="gwc" v-show="this.$route.params.state==='true'">
          <!-- <el-button size="small"> -->
            <i @click="shopping" class="el-icon-shopping-cart-full"></i>
          <!-- </el-button> -->
        </el-badge>
    </Logo_search>
    </el-main>

    <!-- 底部容器 -->
    <el-footer style="width=100%;height:100%; background-color:">
        <router-view @details="details" :detailsData="detailsData"></router-view>
    </el-footer>



    
  </div>


</template>


<script>
import Sign from './Hread.vue';
import Logo_search from './Logo_search.vue'
import Point from './point.vue';
export default {
  components: {Sign,Logo_search, Point},
    data(){
        return{
            logo:'../static/images/logo.gif',
            state:this.$route.params.state,
<<<<<<< HEAD
            cities: {"home":{
                        value: '管理员',
                        label: '',
                        index:"1",
                        route:"/index/true/home",
                      },
              "login":{
                      "2-1":{
=======
            cities: [{
>>>>>>> 8022fe29193ff4e6fb85616e5586e4e13fab4566
                        value: '订单历史',
                        label: 'el-icon-s-goods',
                        index:"/index/true/order",
                      }, "2-2":{
                        value: '收藏夹',
                        label: 'el-icon-s-goods',
                        index:"2-2",
                      }, "2-3":{
                        value: '常用联系人',
                        label: 'el-icon-s-goods',
                        index:"2-3",
                      }, "2-4":{
                        value: '个人设置',
                        label: 'el-icon-s-goods',
                        index:"2-4",
                      }, "2-5":{
                        value: '充值',
                        label: 'el-icon-s-goods',
                        index:"2-5",
                      }, "2-6":{
                        value: '未支付订单',
                        label: 'el-icon-s-goods',
                        index:"2-6",
                      }, "2-7":{
                        value: '近日足迹图表预览',
                        label: 'el-icon-s-goods',
                        index:"2-7",
                      }, "2-8":{
                        value: '退出',
                        label: 'el-icon-s-goods',
                        index:"/index/false/home",
                      },
            },"notlogin":{
                      "login":{
                        value:"登录",
                        label:"",
                        index:"/index/false/login",
                      },"register":{
                        value:"注册",
                        label:"",
                        index:"/index/false/register",
                      }
            },
            },
            value: '',
            activeIndex:'1',
            detailsData:'',

        }
    },
    methods:{
      handleSelect(key, keyPath) {
        // key = this.Navigation[key];
        // console.log(key, keyPath);
        // this.$router.push(`/index/${this.$route.params.state}/`+key);
      },
    
      changed(x) {
        // alert("选项被更改");
        alert(x);
      },

      // 详情界面
      details(data){
        this.detailsData=data;
        this.$router.push("/index/"+this.state+'/product')
      },
      // 点击logo
      logo_click(){this.$router.push("/index/"+this.state+'/home')},
      // 点击购物车
<<<<<<< HEAD
      shopping(){ this.$router.push('/index/'+this.state+"/shopping");}
=======
      shopping(){
        // 跳转
        this.$router.push('/index/'+state+"/shopping");
      }
>>>>>>> 8022fe29193ff4e6fb85616e5586e4e13fab4566
      
    },
    beforeCreate: function() {
        // 更新参数
        this.state = this.$route.params.state;
        // console.log("创建前");
        //默认路由
        let route = this.$route.path;
        // 如果路径为不完整的话就跳转到完整路径，这个问题已从路由处解决，这里的代码不会起作用，备用
        if(route===("/index/"+this.state)){
          this.$router.push(`/index/`+this.state+'/home')
        }
    },


    beforeUpdate: function() {
      // 更新参数
      this.state = this.$route.params.state;

      let route = this.$route.path;
      // alert("更新完成前url:"+route);
      // 判断一下是登录状态还是未登录状态
      // 这里主要是判断路径如果是‘/index/false’这样子的路径不判断页面就会出现断层bug
      let  true_false = '';
      if(route.indexOf('/true')!=-1){
          true_false='true/';
      }else{
          true_false='false/';        
      }

      // 
      if(route.indexOf(true_false)===-1){
        this.$router.push(`/index/`+this.state+'/home')
      }

      
    },

    
    

}

  
</script>
<style>
  *{
    margin: 0;
    padding: 0;
  }
/* 头部登录和注册 */
  #head-ogin{
    height: 40px;
    width: 100%;
    /* background-color: ; */
    text-align: right;
    line-height: 50px;
  }


  /* 轮播图的样式 =================*/
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
    
  }
  /* ============================ */
  #fenlei{
    height: 100%!important;
    
  }
  #core{
    width: 100px;
    /* 选中 */
    outline:none;
    /* 不选中  */
    border:none;
    color: black;
    
  }
  #core::placeholder{
    color: black;
  }
</style>